<template>
  <el-dialog :id="officeDialogId"
             v-model="dialog.visible"
             fullscreen
             destroy-on-close>
    <div style="height: 100%;width:100%">
      <start-office v-if="showOffice" v-model="ossId" :edit="edit"></start-office>
    </div>
  </el-dialog>
</template>
<script>

import StartOffice from "components/start-components/start-office/index.vue";

export default {
  name: "startOfficeDialog",
  components: {StartOffice},
  computed: {
    officeDialogId() {
      return 'officeDialog_' + Math.random()
    }
  },
  props:{
    edit:{
      type: [String, Boolean],
      default: true
    }
  },
  data() {
    return {
      ossId: null,
      dialog: {
        visible: false
      },
      showOffice: false,
      documentId: null,
      docConfig: null,
    }
  },
  methods: {
    show(ossId) {
      this.dialog.visible = true
      this.$nextTick(() => {
        this.ossId = ossId;
        this.showOffice = true;
        this.initOffice()
      })

    },
    initOffice() {
      let dialogEl = document.getElementById(this.officeDialogId)
      let headerEL = dialogEl.getElementsByClassName("el-dialog__header")[0]
      let bodyEL = dialogEl.getElementsByClassName("el-dialog__body")[0]


      let dialogStyle = window.getComputedStyle(dialogEl);
      let headerStyle = window.getComputedStyle(headerEL);


      let bodyHeight = dialogEl.offsetHeight - parseInt(dialogStyle.marginTop, 10) - parseInt(dialogStyle.marginBottom, 10);
      bodyHeight = bodyHeight - parseInt(dialogStyle.paddingTop, 10) - parseInt(dialogStyle.paddingBottom, 10)
      let headerHeight = headerEL.offsetHeight + parseInt(headerStyle.marginTop, 10) + parseInt(headerStyle.marginBottom, 10);
      this.showOffice = true
      console.log(bodyHeight, headerHeight)
      // bodyEL.style.height = (bodyHeight - headerHeight) + "px"
      bodyEL.style.height = "100%"

    },
    closeDialog() {

      this.docConfig = null

    }
  },

}
</script>
<style scoped>

</style>
